import * as echarts from "echarts";
import i18n from '@/i18n/index'

const { t } = i18n.global;

//当前任务统计
const renderOption = (data,total) => {
  return {
    grid: '',
    tooltip: {
      trigger: "item"
    },
    title: [
      {
        text: total,
        top: "35%", // 设置主标题位置
        left: "center",
        textStyle: {
          fontSize: '30', // 主标题字体大小
          fontWeight: 600, // 主标题加粗
          color: "#333333", // 主标题颜色
          padding: [10, 0] // 主标题内边距
        }
      },
      {
        text: t('common.unfinishedTasks'),
        top: "45%", // 设置副标题位置
        left: "center",
        textStyle: {
          fontSize: '14px', // 副标题字体大小
          fontWeight: "bold", // 副标题常规
          color: "#666666", // 副标题颜色
          padding: [5, 0] // 副标题内边距
        }
      }
    ],
    legend: {
      orient: 'horizontal', // 水平排列
      bottom: '10%', // 设置位置在底部
      left: 'center', // 设置位置居中
      data: [
        { name: t('agv.inExecution'), icon: 'rect' }, // 图例项
        { name: t('common.PendingExecution'), icon: 'rect' } // 图例项
      ],
      itemGap: 10, // 设置项之间的间隔
      textStyle: {
        color: '#333', // 设置图例文字颜色
        fontSize: '16',
      },
      itemWidth: 30, // 图例项的宽度
      itemHeight: 20, // 图例项的高度
    },
    series: [
      {
        type: "pie",
        radius: ["35%", "55%"],
        center: ["50%", "40%"], // 向上移动，Y 坐标改为 40%
        data: data,
        hoverAnimation: false,
        itemStyle: {
          normal: {
            borderColor: "#fff",
            borderWidth: 2
          }
        },
        labelLine: {
          normal: {
            length: 40,
            length2:30,
            lineStyle: {
              // color: '#e6e6e6'
            }
          }
        },
        label: {
          normal: {
            formatter: function(params, ticket, callback) {
              let total = 0; //总数量
              let percent = 0; //占比
              data.forEach(function(value, index, array) {
                total += value.value;
              });
              let formatNumber = function(num) {
                let reg = /(?=(\B)(\d{3})+$)/g;
                return num.toString().replace(reg, ',');
              }
              percent = ((params.value / total) * 100).toFixed(1);
              return (
                '{name|' + params.name + '}\n{value|' +
                formatNumber(params.value) + '\n' + percent + '%}'
              )
            },
            // padding: [0 , -100, 25, -100],
            rich: {
              icon: {
                fontSize: 16,
                color: 'inherit'
              },
              name: {
                fontSize: 18,
                padding: [0, 0, 0, 10],
                color: '#000'
              },
              value: {
                fontSize: 14,
                fontWeight: 'bolder',
                padding: [10, 0, -100, 10],
                color: 'inherit'
                // color: '#333333'
              }
            }
          }
        }

      }
    ]
  }
}

//历史任务/报警统计
const renderOption3 = (data) => {

  let dateStrList = data.map(item=>item.dateStr)
  let taskCountList = data.map(item=>item.taskCount)
  let warningCountList = data.map(item=>item.warningCount)

  return  {
    color: ['#0C65F6', '#00FFA6', '#F4DF58'],
    grid: {
      left: '8%', // 增加左侧留白以整体向右移动
      right: '8%',
      bottom: '3%',
      top:'25%',
      containLabel: true
    },
    legend: {
      icon: 'rect',
      orient: 'horizontal',
      top: '3%',
      itemWidth: 12,
      itemHeight: 12,
      formatter: ['{a|{name}}'].join('\n'),
      textStyle: {
        color: '#070e2e',
        height: 8,
        rich: {
          a: {
            verticalAlign: 'bottom',
          },
        },
      },
      data: [t('common.tasks'), t('common.alarms')],
    },
    tooltip: {
      confine: true,
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
      textStyle: {
        color: '#070e2e',
        fontSize: 12,
        lineHeight: 24,
      },
      padding: [5, 10],
      formatter(params) {	// 根据条件修改
        // let unit = '个'
        let relVal = params[0].name
        for (let i = 0; i < params.length; i++) {
          if (params[i].seriesName) {
            if (typeof (params[i].color) === 'string') {
              relVal += `<div style="display:flex;align-items:center"><div style="width: 13px;height: 5px; margin-right: 5px; background: ${params[i].color}"></div><div style="padding-right: 20px">${params[i].seriesName}</div>${params[i].value} </div>`
            } else {
              relVal += `<div style="display:flex;align-items:center"><div style="width: 13px;height: 5px; margin-right: 5px; background: ${params[i].color.colorStops[0].color}"></div><div style="padding-right: 20px">${params[i].seriesName}</div>${params[i].value} </div>`
            }
          }
        }
        return relVal
      },
    },
    xAxis: {
      type: 'category',
      data: dateStrList,
      axisLine: {
        lineStyle: {
          color: '#409eff',
        },
      },
      axisLabel: {
        color: '#000000',
        fontWeight: 'bold', // 设置文本加粗
      },
      axisTick: {
        show: false,
      },
    },
    yAxis: [
      {
      type: 'value',
      name: t('common.tasks'),
      nameTextStyle: { // 设置名称文本样式
        color: '#2357c8', // 名称颜色
        fontSize: 14, // 名称字体大小
        padding: [0, 40, 20, 10], // 名称的内边距
      },
      min: 0,
      minInterval: 1,
      splitArea: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        lineStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            { offset: 0, color: 'rgba(45,146,250,1)' }, // 渐变开始颜色
            { offset: 1, color: 'rgba(255,207,51,1)' } // 渐变结束颜色
          ]),
          // type: 'dashed', // dotted 虚线
        },
      },
      axisLabel: {
        color: '#2357c8',
      },
    },
      {
      type: 'value',
      name: t('common.alarms'),
      nameTextStyle: { // 设置名称文本样式
        color: '#ffa346', // 名称颜色
        fontSize: 14, // 名称字体大小
        padding: [0, -40, 20, 0], // 名称的内边距
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        show: false,
      },
      axisLabel: {
        formatter: '{value}%', // 右侧Y轴文字显示
        color: '#ff9946',
      },
      splitArea: {
        show: false,
      },
    }],
    series: [
      { // 柱底圆片
        name: '',
        type: 'pictorialBar',
        symbolSize: [16.1, 9], // 调整截面形状
        z: 1,
        symbolOffset: [0, 3],
        itemStyle: {
          color: '#00ABFF',
        },
        data: taskCountList,
      },
      {
        name: t('common.tasks'),
        type: 'bar',
        z: 2,
        barWidth: 16,
        barMinHeight: 10,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#00D5FF' },
            { offset: 1, color: '#00ABFF' },
          ]),
        },
        data: taskCountList,
      },
      { // 柱顶圆片
        name: '',
        type: 'pictorialBar',
        symbolSize: [16, 9], // 调整截面形状
        symbolOffset: [0, -4],
        z: 3,
        symbolPosition: 'end',
        itemStyle: {
          color: '#008FDF',
        },
        data: taskCountList,
      },
      {
        name: t('common.alarms'),
        type: 'line',
        yAxisIndex: 1, // 使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用quanmei
        z: 4,
        smooth: false, // 平滑曲线显示
        symbol: 'circle', // 标记的图形为实心圆
        symbolSize: 8, // 标记的大小
        areaStyle: {
          // 设置渐变面积
          type: 'default',
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(255,207,51,0.3)' }, // 渐变开始颜色
            { offset: 1, color: 'rgba(255,207,51, 0)' } // 渐变结束颜色
          ])
        },
        data: warningCountList,
        itemStyle: { color: '#FFCF5F' },
      },

    ],
  }
}


// 自定义函数，根据索引返回颜色
function getColorForIndex(index) {
  const colors = ['#2da6e9','#51c8ed','#ffd74d','#f16479','#2fe129']; // 自定义颜色数组
  return colors[index % colors.length]; // 根据索引返回颜色
}



//AGV数量统计柱状
let name1=[t('common.idle'),t('ems.operation'),t('ems.breakdown'),t('common.Charging'),t('common.Offline')];
let value1 =[12,5,5,6,7];

const CubeLeft1 =echarts.graphic.extendShape( {
  shape: {
    x: 0,
    y: 0,
  },
  buildPath: function (ctx, shape) {
    const yAxisPoint = shape.yAxisPoint;
    const c0 = [shape.x, shape.y];
    const c1 = [shape.x + 6, shape.y - 6];
    const c2 = [yAxisPoint[0] + 6, yAxisPoint[1] - 6];
    const c3 = [yAxisPoint[0], yAxisPoint[1]];
    ctx
      .moveTo(c0[0], c0[1])
      .lineTo(c1[0], c1[1])
      .lineTo(c2[0], c2[1])
      .lineTo(c3[0], c3[1])
      .closePath();
  },
})
const CubeRight1 = echarts.graphic.extendShape({
  shape: {
    x: 0,
    y: 0,
  },
  buildPath: function (ctx, shape) {
    const yAxisPoint = shape.yAxisPoint;
    const c1 = [shape.x, shape.y];
    const c2 = [yAxisPoint[0], yAxisPoint[1]];
    const c3 = [yAxisPoint[0] + 6, yAxisPoint[1] + 12];
    const c4 = [shape.x + 6, shape.y + 12];
    ctx
      .moveTo(c1[0], c1[1])
      .lineTo(c2[0], c2[1])
      .lineTo(c3[0], c3[1])
      .lineTo(c4[0], c4[1])
      .closePath();
  },
});
const CubeTop1 = echarts.graphic.extendShape({
  shape: {
    x: 0,
    y: 0,
  },
  buildPath: function (ctx, shape) {
    const c1 = [shape.x, shape.y];
    const c2 = [shape.x + 6, shape.y + 12];
    const c3 = [shape.x + 12, shape.y + 6];
    const c4 = [shape.x + 6, shape.y - 6];
    ctx
      .moveTo(c1[0], c1[1])
      .lineTo(c2[0], c2[1])
      .lineTo(c3[0], c3[1])
      .lineTo(c4[0], c4[1])
      .closePath();
  },
});
// 注册三个面图形
echarts.graphic.registerShape('CubeLeft1', CubeLeft1)
echarts.graphic.registerShape('CubeRight1', CubeRight1)
echarts.graphic.registerShape('CubeTop1', CubeTop1)
const renderOption4 = (data) => {
  return  {
    tooltip: {
      show: true,
      trigger: "axis",
      axisPointer: {
        type: "none",
      },
      formatter: function (params) {
        const item = params[0];
        return item.name + " : " + item.value;
      },
    },
    grid: {
      left: 15,
      right: 60,
      bottom: 10,
      top: 50,
      containLabel: true,
    },
    yAxis: {
      type: 'category',
      data: name1,
      axisLine: {
        show: true,
        lineStyle: {
          color: '#2B7BD6',
        },
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        fontSize: 14,
        interval: 0,
        color: '#000000',
        fontWeight: 'bold', // 设置文本加粗
      },
    },
    xAxis: {
      type: 'value',
      axisLine: {
        show: true,
        lineStyle: {
          color: '#2B7BD6',
        },

      },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
          color: '#7bb4f8',
        },
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        fontSize: 14,
        color: '#000000',
        fontWeight: 'bold', // 设置文本加粗
      },
    },
    series: [
      {
        type: "custom",
        renderItem: (params, api) => {
          const location = api.coord([api.value(0), api.value(1)]);
          const value = api.value(1); // 获取 y 轴的值
          const yValue = data[params.dataIndex]; // 获取 y 轴的值

          return {
            type: "group",
            children: [
              {
                type: "CubeLeft1",
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: value,
                  x: location[0],
                  y: location[1],
                  yAxisPoint: api.coord([0, value]),
                },
                style: {
                  fill: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                    { offset: 0, color: "rgba(0,0,0,0.4)" },
                    { offset: 0.3, color: "RGBA(16, 76, 145, 0.3)" },
                    { offset: 0.5, color: "RGBA(16, 76, 145, 0.6)" },
                    { offset: 1, color: "RGBA(16, 76, 145, 1)" },
                  ]),
                },
              },
              {
                type: "CubeRight1",
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: value,
                  x: location[0],
                  y: location[1],
                  yAxisPoint: api.coord([0, value]),
                },
                style: {
                  fill: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                    { offset: 0, color: "rgba(0,0,0,0.4)" },
                    { offset: 0.3, color: "rgba(27, 126, 242, 0.3)" },
                    { offset: 0.5, color: "rgba(27, 126, 242, 0.6)" },
                    { offset: 1, color: "rgba(27, 126, 242, 1)" },
                  ]),
                },
              },
              {
                type: "CubeTop1",
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: value,
                  x: location[0],
                  y: location[1],
                  yAxisPoint: api.coord([0, value]),
                },
                style: {
                  fill: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                    { offset: 0, color: "#3B80E2" },
                    { offset: 1, color: "#49BEE5" },
                  ]),
                },
              },
              // 添加数值展示
              {
                type: 'text',
                style: {
                  x: location[0] + 25, // x 轴位置
                  y: location[1] - 5, // y 轴位置，调整为顶部
                  text: yValue, // 显示的文本
                  fill: '#153D7D', // 文本颜色
                  fontSize: 16,
                  font: '16px Microsoft YaHei', // 字体样式
                  textAlign: 'center', // 文本居中
                },
              },
            ],
          };
        },
        data: data,
      },
    ],
  }
}

//AGV数量统计柱状扇形
const renderOption7 = (data) => {
  return  {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'horizontal', // 设置为横向排列
      left: 'center',
      bottom: '5%',
      itemGap: 5, // 设置项之间的间隔
      textStyle: {
        color: '#333', // 文字颜色
        fontSize: 14, // 文字大小
      },
      itemWidth: 20, // 图例项的宽度
      itemHeight: 20, // 图例项的高度
      formatter: (name) => {
        return ` ${name}`; // 自定义图例项格式
      },
    },
    series: [
      {
        name: 'AGV数量统计',
        type: 'pie',
        radius: ['20%', '60%'], // 使用内外半径来增大饼图整体大小
        data: data,
        itemStyle: {
          color: (params) => {
            const colors = ['#2da6e9','#51c8ed','#ffd74d','#f16479','#2fe129']; // 定义每个扇面的颜色
            return colors[params.dataIndex]; // 根据数据索引返回对应颜色
          }
        },
        labelLine: {
          normal: {
            length: 20,
            length2:60,
            lineStyle: {
              // color: '#e6e6e6'
            }
          }
        },
        label: {
          normal: {
            formatter: function(params, ticket, callback) {
              let total = 0; //总数量
              let percent = 0; //占比
              data.forEach(function(value, index, array) {
                total += value.value;
              });
              let formatNumber = function(num) {
                let reg = /(?=(\B)(\d{3})+$)/g;
                return num.toString().replace(reg, ',');
              }
              percent = ((params.value / total) * 100).toFixed(1);
              return (
                '{icon|●}{name|' + params.name + '}\n{value|' +
                formatNumber(params.value) + '\n' + percent + '%}'
              )
            },
            // padding: [0 , -100, 25, -100],
            rich: {
              icon: {
                fontSize: 16,
                color: 'inherit'
              },
              name: {
                fontSize: 18,
                padding: [0, 0, 0, 10],
                color: '#000'
              },
              value: {
                fontSize: 14,
                fontWeight: 'bolder',
                padding: [10, 0, 0, 20],
                color: 'inherit'
                // color: '#333333'
              }
            }
          }
        }

      }
    ]
  }
}

//报警等级数据
let name=[t('common.alarms1'),t('common.alarms2'),t('common.alarms3')];
// let value =[12,5,33,6,7,2,45,67,9];
let toolTims = null
const offsetX = 16;
const offsetY = 8;
// 绘制左侧面
const CubeLeft = echarts.graphic.extendShape({
  shape: {
    x: 0,
    y: 0,
  },
  buildPath: function (ctx, shape) {
    const xAxisPoint = shape.xAxisPoint;
    const c0 = [shape.x, shape.y];
    const c1 = [shape.x - offsetX, shape.y - offsetY];
    const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
    const c3 = [xAxisPoint[0], xAxisPoint[1]];
    ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath();
  },
});
// 绘制右侧面
const CubeRight = echarts.graphic.extendShape({
  shape: {
    x: 0,
    y: 0,
  },
  buildPath: function (ctx, shape) {
    const xAxisPoint = shape.xAxisPoint;
    const c1 = [shape.x, shape.y];
    const c2 = [xAxisPoint[0], xAxisPoint[1]];
    const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
    const c4 = [shape.x + offsetX, shape.y - offsetY];
    ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
  },
});
// 绘制顶面
const CubeTop = echarts.graphic.extendShape({
  shape: {
    x: 0,
    y: 0,
  },
  buildPath: function (ctx, shape) {
    const c1 = [shape.x, shape.y];
    const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点
    const c3 = [shape.x, shape.y - offsetX];
    const c4 = [shape.x - offsetX, shape.y - offsetY];
    ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
  },
});
// 注册三个面图形
echarts.graphic.registerShape('CubeLeft', CubeLeft);
echarts.graphic.registerShape('CubeRight', CubeRight);
echarts.graphic.registerShape('CubeTop', CubeTop);
// 主体
const renderOption5 =(data) =>{
  return {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
      formatter: function (params) {
        const item = params[1];
        return `${t('inventoryInforSummary.alarmLevel')}：${item.name}<br>${t('common.alarmsData')}：${item.value}`;
      },
    },
    grid: {
      top: "18%",
      left: "5%",
      right: "5%",
      bottom: "5%",
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      data: name,
      // X
      axisLine: {
        show: true,
        lineStyle: {
          // width: 1,
          color: '#2B7BD6',
        },
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        fontSize: 14,
        interval: 0,
        color: '#000000',
        fontWeight: 'bold', // 设置文本加粗
      },
    },
    yAxis: {

      type: 'value',
      // y
      axisLine: {
        show: true,
        lineStyle: {
          // width: 1,
          color: '#2B7BD6',
        },
      },
      splitLine: {
        show: true,
        // y-line
        lineStyle: {
          // width: 1,
          type:'dashed',
          color: '#153D7D',
        },
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        fontSize: 14,
        color: '#000000',
        fontWeight: 'bold', // 设置文本加粗
      },
    },
    series: [
      // 柱体
      {
        name: '',
        type: 'custom',
        renderItem: (params, api) => {
          const location = api.coord([api.value(0), api.value(1)]);
          return {
            type: 'group',
            children: [
              {
                type: 'CubeLeft',
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0]),
                },
                style: {
                  fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: '#33BCEB',
                    },
                    {
                      offset: 1,
                      color: '#337CEB',
                    },
                  ]),
                },
              },
              {
                type: 'CubeRight',
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0]),
                },
                style: {
                  fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: '#28A2CE',
                    },
                    {
                      offset: 1,
                      color: '#1A57B7',
                    },
                  ]),
                },
              },
              {
                type: 'CubeTop',
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0]),
                },
                style: {
                  fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: '#43C4F1',
                    },
                    {
                      offset: 1,
                      color: '#28A2CE',
                    },
                  ]),
                },
              },
            ],
          };
        },
        data: data,
      },
      // bar顶部数量
      {
        name: '',
        type: 'bar',
        label: {
          normal: {
            show: true,
            position: 'top',
            formatter: (e) => {
              return`${e.value  }`;
            },
            fontSize: 16,
            color: '#43C4F1',
            offset: [0, -15],
          },
        },
        itemStyle: {
          color: 'transparent',
        },
        tooltip: {},
        data: data,
      },
    ],
  }

}

//电量区间分布
const renderOption6 = (data) => {
  return  {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'horizontal', // 设置为横向排列
      left: '5%',
      bottom: '5%',
      itemGap: 5, // 设置项之间的间隔
      textStyle: {
        color: '#333', // 文字颜色
        fontSize: 14, // 文字大小
      },
      itemWidth: 20, // 图例项的宽度
      itemHeight: 20, // 图例项的高度
      formatter: (name) => {
        return ` ${name}`; // 自定义图例项格式
      },
    },
    series: [
      {
        name: t('common.Electricity'),
        type: 'pie',
        radius: ['0%', '60%'], // 使用内外半径来增大饼图整体大小
        data: data,
        itemStyle: {
          color: (params) => {
            const colors = ['#2da6e9', '#51c8ed', '#ffd74d', '#f16479']; // 定义每个扇面的颜色
            return colors[params.dataIndex]; // 根据数据索引返回对应颜色
          }
        },
        labelLine: {
          normal: {
            length: 20,
            length2:60,
            lineStyle: {
              // color: '#e6e6e6'
            }
          }
        },
        label: {
          normal: {
            formatter: function(params, ticket, callback) {
              let total = 0; //总数量
              let percent = 0; //占比
              data.forEach(function(value, index, array) {
                total += value.value;
              });
              let formatNumber = function(num) {
                let reg = /(?=(\B)(\d{3})+$)/g;
                return num.toString().replace(reg, ',');
              }
              percent = ((params.value / total) * 100).toFixed(1);
               return (
                 '{icon|●}{name|' + params.name + '}\n{value|' +
                 formatNumber(params.value) + '\n' + percent + '%}'
               )
            },
            // padding: [0 , -100, 25, -100],
            rich: {
              icon: {
                fontSize: 16,
                color: 'inherit'
              },
              name: {
                fontSize: 18,
                padding: [0, 0, 0, 10],
                color: '#000'
              },
              value: {
                fontSize: 14,
                fontWeight: 'bolder',
                padding: [10, 0, 0, 20],
                color: 'inherit'
                // color: '#333333'
              }
            }
          }
        }

      }
    ]
  }
}






export { renderOption ,renderOption3,renderOption4,renderOption5,renderOption6,renderOption7}
